<template>
  <div>
    <el-card class="box-card" style="margin-top:40px;">
      <div class="clearfix" slot="header">
        <svg-icon icon-class="international"/>
        <span style="margin-left:10px;">{{ $t('i18nView.title') }}</span>
      </div>
      <div>
        <el-radio-group size="small" v-model="lang">
          <el-radio border label="zh">简体中文</el-radio>
          <el-radio border label="en">English</el-radio>
          <el-radio border label="es">Español</el-radio>
        </el-radio-group>
        <el-tag style="margin-top:15px;display:block;" type="info">{{ $t('i18nView.note') }}</el-tag>
      </div>
    </el-card>

    <el-row :gutter="20" style="margin:100px 15px 50px;">
      <el-col :span="12" :xs="24">
        <div class="block">
          <el-date-picker :placeholder="$t('i18nView.datePlaceholder')" type="date" v-model="date"/>
        </div>
        <div class="block">
          <el-select :placeholder="$t('i18nView.selectPlaceholder')" v-model="value">
            <el-option
              :key="item.value"
              :label="item.label"
              :value="item.value"
              v-for="item in options"
            />
          </el-select>
        </div>
        <div class="block">
          <el-button class="item-btn" size="small">{{ $t('i18nView.default') }}</el-button>
          <el-button class="item-btn" size="small" type="primary">{{ $t('i18nView.primary') }}</el-button>
          <el-button class="item-btn" size="small" type="success">{{ $t('i18nView.success') }}</el-button>
          <el-button class="item-btn" size="small" type="info">{{ $t('i18nView.info') }}</el-button>
          <el-button class="item-btn" size="small" type="warning">{{ $t('i18nView.warning') }}</el-button>
          <el-button class="item-btn" size="small" type="danger">{{ $t('i18nView.danger') }}</el-button>
        </div>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
          <el-table-column :label="$t('i18nView.tableName')" align="center" prop="name" width="100"/>
          <el-table-column :label="$t('i18nView.tableDate')" align="center" prop="date" width="120"/>
          <el-table-column :label="$t('i18nView.tableAddress')" prop="address"/>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import local from './local'

  const viewName = 'i18nView'

  export default {
    name: 'I18n',
    data() {
      return {
        date: '',
        tableData: [{
          date: '2016-05-03',
          name: 'Tom',
          address: 'No. 189, Grove St, Los Angeles'
        },
          {
            date: '2016-05-02',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          },
          {
            date: '2016-05-04',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          },
          {
            date: '2016-05-01',
            name: 'Tom',
            address: 'No. 189, Grove St, Los Angeles'
          }],
        options: [],
        value: ''
      }
    },
    computed: {
      lang: {
        get() {
          return this.$store.state.app.language
        },
        set(lang) {
          this.$i18n.locale = lang
          this.$store.dispatch('setLanguage', lang)
        }
      }
    },
    watch: {
      lang() {
        this.setOptions()
      }
    },
    created() {
      if (!this.$i18n.getLocaleMessage('en')[viewName]) {
        this.$i18n.mergeLocaleMessage('en', local.en)
        this.$i18n.mergeLocaleMessage('zh', local.zh)
        this.$i18n.mergeLocaleMessage('es', local.es)
      }
      this.setOptions() // set default select options
    },
    methods: {
      setOptions() {
        this.options = [
          {
            value: '1',
            label: this.$t('i18nView.one')
          },
          {
            value: '2',
            label: this.$t('i18nView.two')
          },
          {
            value: '3',
            label: this.$t('i18nView.three')
          }
        ]
      }
    }
  }
</script>

<style scoped>
  .box-card {
    width: 600px;
    max-width: 100%;
    margin: 20px auto;
  }

  .item-btn {
    margin-bottom: 15px;
    margin-left: 0px;
  }

  .block {
    padding: 25px;
  }
</style>
